import React, { PureComponent } from 'react'
import { Icon, Menu } from 'antd'
import Link from 'umi/link'
import { formatMessage } from 'umi/locale'
import pathToRegexp from 'path-to-regexp'
import { urlToList } from '../_utils/pathTools'
import styles from './index.less'
import { isUrl } from '@/utils/utils'
import IconFont from '@/components/IconFont'
import { toPath } from '@/utils/router'

const { SubMenu } = Menu

// Allow menu.js config icon as string or ReactNode
//   icon: 'setting',
//   icon: 'icon-geren' #For Iconfont ,
//   icon: 'http://demo.com/icon.png',
//   icon: <Icon type="setting" />,
function getIcon(icon) {
  if (typeof icon === 'string') {
    if (isUrl(icon))
      return <Icon component={() => <img src={icon} alt="icon" className={styles.icon} />} />

    if (icon.startsWith('icon-'))
      return <IconFont type={icon} />

    return <Icon type={icon} />
  }
  return icon
}

export function getMenuMatches(flatMenuKeys, path) {
  return flatMenuKeys.filter(item => item && pathToRegexp(item).test(path))
}

export default class BaseMenu extends PureComponent {
  constructor(props) {
    super(props)
    this.flatMenuKeys = this.getFlatMenuKeys(props.menuData)
  }

  /**
   * Recursively flatten the data
   * [{path:string},{path:string}] => {path,path2}
   * @param  menus
   */
  getFlatMenuKeys(menus) {
    let keys = []
    menus.forEach((item) => {
      if (item.children)
        keys = keys.concat(this.getFlatMenuKeys(item.children))

      keys.push(item.path)
    })
    return keys
  }

  /**
   * 获得菜单子节点
   * @memberof SiderMenu
   */
  getNavMenuItems = (menusData, parent) => {
    if (!menusData)
      return []

    return menusData
      .filter(item => item.name && !item.hideInMenu)
      .map((item) => {
        // make dom
        const ItemDom = this.getSubMenuOrItem(item, parent)
        return this.checkPermissionItem(item.authority, ItemDom)
      })
      .filter(item => item)
  }

  // Get the currently selected menu
  getSelectedMenuKeys = () => {
    const {
      location: { pathname },
    } = this.props
    return urlToList(pathname).map(itemPath => getMenuMatches(this.flatMenuKeys, itemPath).pop())
  }

  /**
   * get SubMenu or Item
   */
  getSubMenuOrItem = (item) => {
    // doc: add hideChildrenInMenu
    if (item.children && !item.hideChildrenInMenu && item.children.some(child => child.name)) {
      const name = formatMessage({ id: item.locale })
      return (
        <SubMenu
          title={
            item.icon
              ? (
              <span>
                {getIcon(item.icon)}
                <span>{name}</span>
              </span>
                )
              : (
                  name
                )
          }
          key={item.path}
        >
          {this.getNavMenuItems(item.children)}
        </SubMenu>
      )
    }
    return <Menu.Item key={item.path}>{this.getMenuItemPath(item)}</Menu.Item>
  }

  /**
   * 判断是否是http链接.返回 Link 或 a
   * Judge whether it is http link.return a or Link
   * @memberof SiderMenu
   */
  getMenuItemPath = (item) => {
    const name = formatMessage({ id: item.locale })
    const itemPath = this.conversionPath(item.path)
    const icon = getIcon(item.icon)
    const { target } = item
    // Is it a http link
    if (/^https?:\/\//.test(itemPath)) {
      return (
        <a href={itemPath} target={target}>
          {icon}
          <span>{name}</span>
        </a>
      )
    }
    const { location, isMobile, onCollapse } = this.props
    return (
      <Link
        to={toPath(itemPath)}
        target={target}
        replace={itemPath === location.pathname}
        onClick={
          isMobile
            ? () => {
                onCollapse(true)
              }
            : undefined
        }
      >
        {icon}
        <span>{name}</span>
      </Link>
    )
  }

  // permission to check
  checkPermissionItem = (authority, ItemDom) => {
    const { Authorized } = this.props
    if (Authorized && Authorized.check) {
      const { check } = Authorized
      return check(authority, ItemDom)
    }
    return ItemDom
  }

  conversionPath = (path) => {
    if (path && path.indexOf('http') === 0)
      return path

    return `/${path || ''}`.replace(/\/+/g, '/')
  }

  render() {
    const { openKeys, theme, mode } = this.props
    // if pathname can't match, use the nearest parent's key
    let selectedKeys = this.getSelectedMenuKeys()
    if (!selectedKeys.length && openKeys)
      selectedKeys = [openKeys[openKeys.length - 1]]

    let props = {}
    if (openKeys) {
      props = {
        openKeys,
      }
    }
    const { handleOpenChange, style, menuData } = this.props
    return (
      <Menu
        key="Menu"
        mode={mode}
        theme={theme}
        onOpenChange={handleOpenChange}
        selectedKeys={selectedKeys}
        style={style}
        className={mode === 'horizontal' ? 'top-nav-menu' : ''}
        {...props}
      >
        {this.getNavMenuItems(menuData)}
      </Menu>
    )
  }
}
